<template>
  <div class="video-container">
    <!-- 视频播放器 -->
    <video
        ref="videoPlayer"
        class="video-element"
        @play="handlePlay"
        @pause="handlePause"
        @timeupdate="handleTimeUpdate"
        @seeked="handleSeeked"
    >
      <source src="/video/02.mp4" type="video/mp4">
    </video>

    <!-- 弹幕容器 -->
    <div class="danmu-container">
      <div
          v-for="danmu in activeDanmus"
          :key="danmu.id"
          class="danmu"
          :style="{
          color: danmu.color,
          top: `${danmu.top}px`,
          transform: `translateX(${danmu.position}%)`
        }"
      >
        {{ danmu.text }}
      </div>
    </div>

    <!-- 弹幕发送控件 -->
    <div class="controls">
      <input
          v-model="newDanmuText"
          placeholder="输入弹幕"
          @keyup.enter="sendDanmu"
      >
      <button @click="sendDanmu">
        发送
      </button>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted, onUnmounted } from 'vue'

// 视频相关
const videoPlayer = ref(null)
const isPlaying = ref(false)
const currentTime = ref(0)

// 弹幕相关
const newDanmuText = ref('')
const danmus = ref([])
let danmuId = 0
const danmuSpeed = 0.5 // 弹幕移动速度（%每帧）
const animationFrame = ref(null)

// 当前活跃的弹幕（过滤掉已移出屏幕的）
const activeDanmus = computed(() => {
  return danmus.value.filter(d => d.position > -100)
})

// 发送弹幕
const sendDanmu = () => {
  if (!newDanmuText.value.trim()) return

  danmus.value.push({
    id: danmuId++,
    text: newDanmuText.value,
    color: '#fff',
    playTime: currentTime.value,
    position: 100,
    top: Math.random() * 80 + 10 // 随机顶部位置（10%-90%）
  })

  newDanmuText.value = ''
}

// 更新弹幕位置
const updateDanmuPositions = () => {
  const now = currentTime.value
  danmus.value.forEach(danmu => {
    // 只处理已经开始播放的弹幕
    if (now >= danmu.playTime) {
      const elapsed = now - danmu.playTime
      danmu.position = 100 - (elapsed * danmuSpeed)
    }
  })
}

// 视频事件处理
const handlePlay = () => {
  isPlaying.value = true
  startAnimation()
}

const handlePause = () => {
  isPlaying.value = false
  stopAnimation()
}

const handleTimeUpdate = () => {
  currentTime.value = videoPlayer.value.currentTime
}

const handleSeeked = async () => {
  // 清空当前弹幕并加载新的
  danmus.value = []
  currentTime.value = videoPlayer.value.currentTime
  // 这里可以添加API调用获取当前时间的弹幕
}

// 动画控制
const startAnimation = () => {
  const animate = () => {
    if (!isPlaying.value) return
    updateDanmuPositions()
    animationFrame.value = requestAnimationFrame(animate)
  }
  animationFrame.value = requestAnimationFrame(animate)
}

const stopAnimation = () => {
  if (animationFrame.value) {
    cancelAnimationFrame(animationFrame.value)
  }
}

// 生命周期
onMounted(() => {
  videoPlayer.value.controls = true
})

onUnmounted(() => {
  stopAnimation()
})
</script>

<style scoped>
.video-container {
  position: relative;
  width: 800px;
  margin: 0 auto;
}

.video-element {
  width: 100%;
  height: 450px;
}

.danmu-container {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  overflow: hidden;
}

.danmu {
  position: absolute;
  white-space: nowrap;
  font-size: 20px;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7);
  transition: transform 0.1s linear;
}

.controls {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 10px;
  z-index: 10;
}

input {
  padding: 8px;
  width: 200px;
}

button {
  padding: 8px 16px;
  background: #2196F3;
  border: none;
  color: white;
  cursor: pointer;
}
</style>